<template>
  <div class="main">
    <u-navbar :title="form.name"
     :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
          back-icon-color="#fff"
          title-color="#fff"> </u-navbar>

    <u-tabs :list="list" is-scroll :current="current" @change="change" active-color="rgb(1, 72, 51)" inactive-color="rgb(153, 153, 153)"></u-tabs>
    <scroll-view :scroll-into-view="toView" scroll-with-animation scroll-y class="content" @scroll="handleScroll">

      <div class="sctb-card">
        <div class="title">{{ form.customerName }}</div>

        <div class="sctb-content">
          <span class="unit">工作面名称:</span>
          <span class="val">{{ form.name }}</span>
        </div>
        <div class="sctb-content">
          <span class="unit">工作面类型:</span>
          <span class="val">{{ form.type==='0'?'掘进':'采面' }}</span>
        </div>
        <div class="sctb-content">
          <span class="unit">工作面状态:</span>
          <span class="val">{{ form.currentStatusName }}</span>
        </div>
      </div>

      <div id="view1" class="u-m-t-20">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0 u-m-t-20">
          <view slot="head">
            <view class=" u-flex head">
              <u-section :title="'工作面进度('+$formatDate( new Date(), 'yyyy-MM-dd')+')'" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box" v-if="form.type==='0'">
              <div class="sctb-content u-m-t-0">
                <span class="unit">今日进尺（m）:</span>
                <span class="val">{{ form.progressVo.todayDrivingLength }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">本月计划进尺（m）:</span>
                <span class="val">{{ form.progressVo.thisMonthPlanDrivingLength }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">本月累计进尺（m）:</span>
                <span class="val">{{ form.progressVo.thisMonthDrivingLength }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">本年累计进尺（m）:</span>
                <span class="val">{{ form.progressVo.thisYearDrivingLength }}</span>
              </div>
            </div>
            <div class="sctb-box" v-else>
              <div class="sctb-content u-m-t-0">
                <span class="unit">今日推进(m):</span>
                <span class="val">{{ form.progressVo.todayDrivingLength }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">今日生产煤量(吨):</span>
                <span class="val">{{ form.progressVo.todayCoalYield }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">本月计划煤量(吨):</span>
                <span class="val">{{ form.progressVo.thisMonthPlanCoalYield }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">本月累计生产煤量(吨):</span>
                <span class="val">{{ form.progressVo.thisMonthCoalYield }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">本年累计生产煤量(吨):</span>
                <span class="val">{{ form.progressVo.thisYearCoalYield }}</span>
              </div>
            </div>
          </view>
        </u-card>
      </div>

      <div id="view2" class="u-m-t-20">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0 u-m-t-20">
          <view slot="head">
            <view class=" u-flex head">
              <u-section title="基本信息" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box" v-if="form.type==='0'">
              <div class="sctb-content u-m-t-0">
                <span class="unit">掘进方法:</span>
                <span class="val">{{ form.drivingMethodName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">围岩性质:</span>
                <span class="val">{{ form.typeDetailName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">设计长度（m）:</span>
                <span class="val">{{ form.designLen }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">断面形状:</span>
                <span class="val">{{ form.sectionTypeName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">初始里程（m）:</span>
                <span class="val">{{ form.initDepth }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">巷道类别:</span>
                <span class="val">{{ form.serviceRangeName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">净断面（㎡）:</span>
                <span class="val">{{ form.clearSection }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">支护方式:</span>
                <span class="val">{{ form.foreverMethodName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">坡度（°）:</span>
                <span class="val">{{ form.slope }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">循环进尺（m）:</span>
                <span class="val">{{ form.loopDepth }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">单班定员（人）:</span>
                <span class="val">{{ form.workPNum }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">初始掘进日期:</span>
                <span class="val">{{ form.initWorkDate }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">需风量（m³/min）:</span>
                <span class="val">{{ form.needWind }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">所属煤层:</span>
                <span class="val">{{ form.layerName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">平均煤厚（m）:</span>
                <span class="val">{{ form.averageCoalThickness }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">煤密度（t/m³）:</span>
                <span class="val">{{ form.coalDensity }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">煤占巷道断面比例（%）:</span>
                <span class="val">{{ form.coalOccupiesLanewaySectionRatio }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">循环雷管消耗（发）:</span>
                <span class="val">{{ form.circulateDetonatorConsume }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">循环炸药消耗（kg）:</span>
                <span class="val">{{ form.circulateDynamiteConsume }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">是否智能化工作面:</span>
                <span class="val">{{ form.isIntelligentWorkFaceName }}</span>
              </div>
            </div>
            <div class="sctb-box" v-else>
              <div class="sctb-content u-m-t-0">
                <span class="unit">采煤工艺:</span>
                <span class="val">{{ form.coalTechName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">所属煤层:</span>
                <span class="val">{{ form.layerName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">支护方式:</span>
                <span class="val">{{ form.supportMethodName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">走向长度(m):</span>
                <span class="val">{{ form.designLenCm }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">采面长度(m):</span>
                <span class="val">{{ form.mineFaceLen }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">采高(m):</span>
                <span class="val">{{ form.coalHigh }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">初始里程(m):</span>
                <span class="val">{{ form.initDepth }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">煤层倾角(°)</span>
                <span class="val">{{ form.dipAngle }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">可采储量(万吨):</span>
                <span class="val">{{ form.recAmount }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">区域防突措施:</span>
                <span class="val">{{ form.measureName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">通风方式:</span>
                <span class="val">{{ form.ventilatedMannerName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">原始瓦斯含量(m³/t):</span>
                <span class="val">{{ form.originalGasAmount }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">残余瓦斯含量(m³/t):</span>
                <span class="val">{{ form.residueGasAmount }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">煤的密度(t/m³):</span>
                <span class="val">{{ form.coalDensity }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">循环推进度(m):</span>
                <span class="val">{{ form.loopDepth }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">单班定员(人):</span>
                <span class="val">{{ form.workPNum }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">回风巷净断面(m²):</span>
                <span class="val">{{ form.clearSection }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">循环炸药消耗（kg）:</span>
                <span class="val">{{ form.circulateDynamiteConsume }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">循环雷管消耗（发）:</span>
                <span class="val">{{ form.circulateDetonatorConsume }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">初始回采日期:</span>
                <span class="val">{{ form.initWorkDate }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">需风量(m³/min):</span>
                <span class="val">{{ form.needWind }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">是否智能化工作面:</span>
                <span class="val">{{ form.isIntelligentWorkFaceName }}</span>
              </div>
            </div>
          </view>
        </u-card>
      </div>

      <div id="view3" class="u-m-t-20">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0 u-m-t-20">
          <view slot="head">
            <view class=" u-flex head">
              <u-section title="附件" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
        <view class="card-grid u-p-20">
              <template v-if="fileOne && fileOne.length > 0">
                <template v-for="(item, index) in fileOne">
                  <!-- 显示图片类 -->
                  <u-image v-if="getFileType(item.archivesUrl) === 'file image'" border-radius="30" width="100%"
                    height="200rpx" :src="getSrc(item.archivesUrl)" :key="index" @click="download(item.archivesUrl)">
                    <view slot="error">
                      <u-image :src="`/static/image/pz/fileAttachments/${getFileTypeName(item.archivesUrl)}.svg`"
                        width="160rpx" height="160rpx" />
                    </view>
                  </u-image>
                  <!-- 显示非图片类 -->
                  <view class="file-down" v-else :key="'no' + index" @click="download(item.archivesUrl)">
                    <u-image width="160rpx" height="160rpx"
                      :src="`/static/image/pz/fileAttachments/${getFileTypeName(item.archivesUrl)}.svg`"></u-image>
                  </view>
                </template>
              </template>
              <!-- 图片缺失 -->
              <u-image v-else border-radius="30" width="100%" height="200rpx"
                src="/static/image/pz/licenseWarning/picture_missing.png" />
            </view>
          </view>
        </u-card>
      </div>

    </scroll-view>

  </div>
</template>

<script>
import fileDownload from '@/pages/common/fileDownload.js'
export default {
  mixins: [fileDownload],
  data () {
    return {
      fileTypeOne: {
        archivesType: 'A',
        materialType: '008',
        method: 'POST',
        relationId: '-1'
      },
      fileOne: [],
      current: 0,
      toView: '',
      list: [
        { name: '工作面进度' },
        { name: '基本信息' },
        { name: '附件' },
      ],
      form:{
        progressVo:{}
      }
    };
  },
  onLoad (options) {
    let dataMsg = JSON.parse(options.item)
    if(dataMsg.type==='0'){
      this.$get('/engineering/getJjEngineeringInfoById?id='+dataMsg.id).then(res=>{
        this.form = res.body
        this.form.type='0'
      })
    }else{
      this.$get('/engineering/getCmEngineeringInfoById?id='+dataMsg.id).then(res=>{
        this.form = res.body
        this.form.type='1'
      })
    }
    this.fileTypeOne.relationId = dataMsg.id
    this.getData()
  },
  methods: {
    async getData () {
      const urlData = await this.$post('/system/archives/findByType', this.fileTypeOne)
      this.fileOne = urlData.body
    },
    change (index) {
      this.current = index;
      this.toView = `view${index + 1}`
    },
    handleScroll ({ detail }) {
      // 112 是scroll-view到顶部的距离
      const query = uni.createSelectorQuery().in(this);
      query.select('#view1').boundingClientRect((res) => {
        if (res.bottom - 112 > 0 && res.top - 112 < 0) {
          this.current = 0
        }
      }).exec();
      query.select('#view2').boundingClientRect((res) => {
        if (res.bottom - 112 > 0 && res.top - 112 < 0) {
          this.current = 1
        }
      }).exec();
      query.select('#view3').boundingClientRect((res) => {
        if (res.bottom - 112 > 0 && res.top - 112 < 0) {
          this.current = 2
        }
      }).exec();
    }
  }
}

</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;

}

.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.sctb-card {
  box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
  border-radius: 6px !important;
  padding: 13px 20px;
  background: #fff;
  .title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
  }
}

.sctb-content {
  margin-top: 10px;



  .val {
    color: rgb(102, 102, 102);
    margin-left: 10px;
  }
}

.sctb-box {
  padding: 10px;
  padding-top: 0
}

.file-grid-name {
  height: 200rpx;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: #595959;
  border: 1rpx dashed #c5c5c5;
}

.card-grid {
  width: 100%;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  /deep/.u-image__error{
		background: transparent;
	}
}
</style>
